<aside class="app-sidebar navbar navbar-expand-md" id="app-sidebar" data-controller="sidebar mobile-sidebar">
  <header class="app-sidebar-header">
    <button class="navbar-toggler" type="button" aria-controls="app-sidebar" aria-expanded="false" aria-label="<%= t("trestle.ui.toggle_navigation", default: "Toggle navigation") %>" data-action="mobile-sidebar#toggle">
      <span class="navbar-toggler-icon"></span>
    </button>

    <%= link_to Trestle.config.root, class: "app-sidebar-title" do %>
      <%= hook("view.title") { render "trestle/shared/title" } %>
    <% end %>
  </header>

  <div class="app-sidebar-inner" data-sidebar-target="inner">
    <nav class="app-nav" data-controller="navigation">
      <% Trestle.navigation(self).each do |group, items| %>
        <%= tag.ul(class: ("collapsed" if group.present? && navigation_group_collapsed?(group)), data: { group: group.id }) do %>
          <% if group.present? %>
            <li class="nav-header"><%= link_to tag.span(group.label), "##{group.id}", data: { action: "navigation#toggle" } %></li>
          <% end %>

          <% items.each do |item| %>
            <%= tag.li(class: ["nav-item", ("active" if current_navigation_item?(item))]) do %>
              <%= link_to item.path, item.html_options.merge(data: { controller: "navigation-tooltip" }) do %>
                <%= icon("nav-icon", item.icon) %>
                <span class="nav-label" data-navigation-tooltip-target="label"><%= item.label %></span>

                <%= tag.span(item.badge.text, class: ["badge", item.badge.html_class]) if item.badge? %>
              <% end %>
            <% end %>
          <% end %>
        <% end %>
      <% end %>
    </nav>
  </div>

  <button class="toggle-sidebar" data-action="sidebar#toggle">
    <span class="visually-hidden"><%= t("trestle.ui.toggle_sidebar", default: "Toggle sidebar") %></span>
  </button>
</aside>
